<template>
	<view class="msg-container" :style="{ height: `${windowHeight}px` }">
		<z-paging ref="paging" v-model="msgList" @query="queryList">

			<!-- <scroll-view scroll-y="true" class="scroll-Y"> -->
			<!-- <view v-for="(item, index) in msgList" :key="index" class="scroll-view-item">
				<image v-if="item.type === 0" class="scroll-image-inform" src="@/static/images/msg/inform.png">
				</image>

				<view class="describe">
					<view class="title-time">
						<view>序号：{{index + 1}}</view>
						<view class="goal">{{ item.content }}</view>
						<view class="time">{{ item.createdAt }}</view>
					</view>
					<view :class="item.content.length > 10 ? 'ellipsis-text' : 'desc-txt'">{{
			        item.content
			      }}</view>
				</view>
			</view> -->
			<uni-list :border="true">
				<!-- :avatar-list="avatarList" -->
				<uni-list-chat title="消息通知" v-for="(item, index) in msgList" :key="index" 
					:note="item.content" time="2020-02-02 20:20" badge-positon="left">
					<view class="chat-custom-right">
						<text class="chat-custom-text">{{item.createdAt}}</text>

					</view>
				</uni-list-chat>


			</uni-list>

			<!-- </scroll-view> -->
		</z-paging>

	</view>
</template>

<script>
	import {
		getTodo,
		getRemind
	} from "@/api/home/index.js";

	import widowHeightMixins from "@/mixins/widowHeightMixins.js";
	export default {
		mixins: [widowHeightMixins],
		data() {
			return {
				queryForm: {
					pageNum: 1,
					pageSize: 10
				},
				msgList: [{
						state: 0,
						type: 0,
						name: "系统通知",
						desc: "您的账号已在设备“小阿甜的华为P60”上,您的账号已在设备“小阿甜的华为P60”上,您的账号已在设备“小阿甜的华为P60”上您的账号已在设备“小阿甜的华为P60”上",
						time: "2024/02/22",
					},
					{
						state: 0,
						type: 0,
						name: "系统通知",
						desc: "您的账号已在设备“小阿甜的华为P60”上,您的账号已在设备“小阿甜的华为P60”上",
						time: "2024/02/22",
					},
					{
						state: 0,
						type: 0,
						name: "系统通知",
						desc: "您的账号已在设备“小阿甜的华为P60”上,您的账号已在设备“小阿甜的华为P60”上",
						time: "2024/02/22",
					},
					{
						state: 0,
						type: 0,
						name: "系统通知",
						desc: "您的账号已在设备“小阿甜的华为P60”上,您的账号已在设备“小阿甜的华为P60”上",
						time: "2024/02/22",
					},
					{
						state: 0,
						type: 0,
						name: "系统通知",
						desc: "您的账号已在设备“小阿甜的华为P60”上,您的账号已在设备“小阿甜的华为P60”上",
						time: "2024/02/22",
					},
					{
						state: 0,
						type: 1,
						name: "积分兑换",
						desc: "您的账号已在设备“小阿甜的华为P60”上,您的账号已在设备“小阿甜的华为P60”上",
						time: "2024/02/22",
					},
				],
			};
		},

		methods: {
			//分页
			queryList(pageNum, pageSize) {
				this.queryForm.pageNum = pageNum
				this.queryForm.pageSize = pageSize
				getRemind(this.queryForm).then((res) => {
					// 将请求的结果数组传递给z-paging
					this.$refs.paging.complete(res.rows);
				}).catch(res => {
					// 如果请求失败写this.$refs.paging.complete(false);
					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},
			//获取消息
			getmes() {
				getRemind(this.queryForm).then((res) => {
					this.msgList = res.rows
				})
			}
		},
		mounted() {
			this.getmes()
		}

	};
</script>

<style lang="scss" scoped>
	.msg-container {
		background: #ffffff;
		border-radius: 16rpx;

		.scroll-Y {
			padding: 0 24rpx;

			.scroll-view-item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 22rpx 0;
				height: 126rpx;
				border-bottom: 2rpx solid #f8f8f9;

				.scroll-image-inform {
					width: 40rpx;
					height: 50rpx;
				}

				// 福利图标
				.scroll-image-bonus {
					width: 40rpx;
					height: 40rpx;
				}

				// 未读标识
				.unread {
					width: 12rpx;
					height: 12rpx;
					background: #ed4014;
					border-radius: 20rpx;
					position: absolute;
					top: 32rpx;
					left: 36rpx;
				}

				.describe {
					width: 90%;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-style: normal;

					.title-time {
						height: 50rpx;
						display: flex;
						justify-content: space-between;

						.goal {
							font-size: 26rpx;
							color: #17233d;
						}

						.time {
							font-size: 20rpx;
							color: #808695;
						}
					}

					// 省略的样式
					.ellipsis-text {
						font-size: 24rpx;
						color: #808695;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.desc-txt {
						font-size: 24rpx;
						color: #808695;
					}
				}
			}
		}
	}
</style>